<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<title>Patients - Qualicare Diagnostic Lab and Records</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="bootstrap_datepicker.js"></script>
<script type="text/javascript" src="patients.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="datepicker.css" />
<link rel="stylesheet" href="base.css" />
</head>

<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<ul class="nav">
						<li><a class="brand" href="#">QDLC</a></li>
						<li class="active"><a href="/Patients">Patients</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="page-header">
			<h1>Qualicare Diagnostic Lab and Records</h1>
			<h4>Service and Reliability</h4>
		</div>
		<div>
			<div class="row">
				<div class="span6">
					<h3>List of Patients</h3>
				</div>
				<div class="span6">
					<a data-toggle="modal" href="#register_new_patient_modal"
						class="btn btn-primary pull-right"  onclick="clearForm()">Register New Patient</a>
				</div>
				<hr>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<table class="table table-stripped table-bordered" id="patientList_table">
						<thead>
							<tr>
								<th>ID</th>
								<th>Name</th>
								<th>Gender</th>
								<th>Physician</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${patients }" var="patient">
								<tr>
									<td>${patient.patientId }</td>
									<td><a href='ViewPatient?patientId=${patient.patientId }'>${patient.name
											}</a></td>
									<td>${patient.gender }</td>
									<td>${patient.physician }</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<hr>
		<footer> &copy; QDLC 2012. All Rights Reserved. </footer>
	</div>

	<!-- Modals -->
	<div id="register_new_patient_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Register New Patient</h3>
		</div>
		<div class="modal-body">
			<div class="row-fluid">
				<div class="span12">
					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="name_input">Patient
									Name</label>
								<div class="controls">
									<input type="text" class="input-xlarge" id="name_input">
									<p class="help-block">First name then last name.</p>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Gender</label>
								<div class="controls">
									<label class="radio"> <input type="radio"
										name="genderRadio" id="male_radio" value="male"> Male
									</label> <label class="radio"> <input type="radio"
										name="genderRadio" id="female_radio" value="female">
										Female
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Date of Birth</label>
								<div class="controls">
									<div class="input-append date" id="birthdate_input"
										data-date="2012-02-01" data-date-format="yyyy-mm-dd">
										<input id="dateOfBirth_input" class="input-small" size="16" type="text" value="2012-02-01">
										<span class="add-on"><i class="icon-th"></i></span>
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="address_input">Address</label>
								<div class="controls">
									<input type="text" class="input-xlarge" id="address_input">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="occupation_input">Occupation</label>
								<div class="controls">
									<input type="text" class="input-xlarge" id="occupation_input">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Civil Status</label>
								<div class="controls">
									<label class="radio"> <input type="radio"
										name="civilStatusRadio" id="single_radio" value="1">
										Single
									</label> <label class="radio"> <input type="radio"
										name="civilStatusRadio" id="married_radio" value="2">
										Married
									</label> <label class="radio"> <input type="radio"
										name="civilStatusRadio" id="complicated_radio" value="3">
										Its Complicated
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="physician_input">Physician</label>
								<div class="controls">
									<input type="text" class="input-xlarge" id="physician_input">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Clinical Status</label>
								<div class="controls">
									<label class="radio"> <input type="radio"
										name="clinicalStatusRadio" id="active_radio" value="1">
										Active
									</label> <label class="radio"> <input type="radio"
										name="clinicalStatusRadio" id="inactive_radio" value="2">
										Inactive
									</label> <label class="radio"> <input type="radio"
										name="clinicalStatusRadio" id="deceased_radio" value="3">
										Deceased
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="textarea">Medical
									History</label>
								<div class="controls">
									<textarea class="input-xlarge" id="medicalHistory_input"
										rows="4"></textarea>
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>

		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary"  onclick="register()">Register</a>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#birthdate_input').datepicker();
		});
	</script>
</body>
</html>